<script setup>
import { useRoute } from 'vue-router'
import { ref, onMounted } from 'vue'
import { readBlog } from '@/api/blogs'
import 'vditor/dist/index.css'
import Vditor from 'vditor'

// 获取路由实例
const route = useRoute()

// 获取传递的id
const receivedId = route.params.id

const vditor = ref()

onMounted( async () => {

    //获得内容
    console.log(receivedId);
    const  result = await readBlog(receivedId);

    

    vditor.value = new Vditor('vditor',{
        height: '80vh',
        width: '100%',
        toolbar: ['fullscreen'], // 可选：隐藏工具栏
        value: result.data.content, // 设置初始内容
        after: () => {
            console.log('编辑器加载完成');
            // 确保在初始化完成后设置值（备选方案）
            vditor.value.setValue(result.data.content);
            
        }
    });
    
})

</script>


<template>

<div style="height: 20px;"></div>
<div class="monitor" id="vditor" ></div>

</template>


<style scoped >

</style>
